Fetch 的 Error

Fetch 的 Error 出現是打開 DevTool 的 NetWork 連線失敗的時候，連 response 都沒有拿到。

如果當 Http status 500 的時候代表是 Server 出問題，而不是 fetch 失敗，因為 status 500 是有拿到 response 的狀況。

如果我 fetch 一個不存在的網址，要怎麼知道錯誤，並錯誤列出來呢？

.catch() 印出 fetch 的 error

catch() 方法只處理 Promise 的被拒絕狀態，並回傳一個新的 Promise 物件。此方法的行為等同於呼叫 Promise.prototype.then(undefined, onRejected)。

.catch() 寫法

const api500 = 'https://run.mocky.io/v3/74e65703-c9b2-4c4c-b36e-88d8cc6cd253'
    const api200 = 'https://drun.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d'
    const request = fetch(api200)
    request.then(response => {
                    return response.json()
                }).then( json => {
                    console.log(json)
                }).catch(err => {
                    console.log('Error: ', err)
                })

.then(undefined, onRejected) 寫法

  const api500 = 'https://run.mocky.io/v3/74e65703-c9b2-4c4c-b36e-88d8cc6cd253'
    const api200 = 'https://drun.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d'
    const request = fetch(api200)
    request.then(response => {
                    return response.json()
                }, 
                error => {
                    console.log(error)
                }).then( json => {
                    console.log(json)
                })

兩者結果幾乎一樣，都可以在 fetch 失敗的時候，印出 Error Messenge。

參考資料： Promise.prototype.catch( ) - By MDN web docs

Fetch POST

在 fetch 裡面多加參數，包含 method, body, headers...等等。

const api500 = 'https://run.mocky.io/v3/74e65703-c9b2-4c4c-b36e-88d8cc6cd253'
const api200 = 'https://run.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d'
const data = {
    name: 'rock070'
}
const request = fetch(api200, {
    method: "POST",
    body: JSON.stringify(data),
//在 POST 的 body 裡面，若是傳送 JSON 格式，需要將物件加上 JSON.stringify()
    headers: new Headers({
        'Content-Type': 'application/json'
    })
})

request.then( res => res.json())
       .catch(error => console.log('Error:', error))
       .then( response => console.log('Success:', response));

成功！

參考資料：Using Fetch By MDN web docs